<template>
	<view class="tui-center">
		<view class="tui-flex" style="padding: 0 26rpx;background: #fff">
			<view class="tui-head-back">
				<view class="tui-back" @tap="clickLeft">
					<uni-icons type="arrowleft" color="#666" size="45"></uni-icons>
				</view>
			</view>
			<view class="tui-back-text">紧急求助</view>
		</view>
		<!--<view style="position: relative">
			<view class="tui-out">
				点击求助后，我们将会把您的实时位置和电话号码发送给景区相关人员。
			</view>
			<view class="tui-help">
				<view class="tui-help-2">
					<view class="tui-help-3" @tap="getTo">
						<view class="tui-help-4">
							我要求助
						</view>
					</view>
				</view>
			</view>
		</view>-->

		<view class="form">
			<view class="tui-flex">
				<view class="name">联系电话</view>
				<input class="ipt" disabled type="number" :value="phone" placeholder="联系电话" />
			</view>
			<view class="tui-flex">
				<view class="name">所在位置</view>
				<input class="ipt" type="text" disabled :value="data" placeholder="请选择" @tap="getTo"/>
				<uni-icons type="arrowright" color="#666" size="36"></uni-icons>
			</view>
		</view>
		<button v-on:click="btOkclick()" class="btOk">完成</button>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
    import uniIcons from "@/components/uni-icons/uni-icons.vue"
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

	export default {
        components: {
            uniIcons, uniLoginModel
		},
		data() {
			return {
				dataForm: {
                    alt: undefined,
                    lat: undefined,
                    lng: undefined,
                    name: undefined,
                    phone: undefined
				},
				data: '',
                phone: ''
			}
		},
		onLoad() {
			this.phone = this.userInfo.phone
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        /*async created() {
            await new Promise(resolve => {
                const script = document.createElement('script')
                script.type = 'text/javascript'
                script.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'
                document.body.appendChild(script)
                script.onload = () => resolve()
            })
            const url = location.href.split('#')[0]
            uni.request({
                url: 'https://test.drawmap.lindingtechnology.com/weapp/getWxConfig',
                data: { url },
                method: 'POST',
                success: (res) => {
                    // console.log(res)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.data.data.appid, // 必填，公众号的唯一标识
                        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
                        signature: res.data.data.signature, // 必填，签名
                        jsApiList: ['openLocation', 'getLocation'] // 必填，需要使用的JS接口列表
                    })

                    wx.error(function(res) {
                        console.log(JSON.stringify(res) + 'err')
                    })
                    wx.ready()
                },
                fail: (error => {
                })
            })
		},*/
		methods: {
            getTo() {
                var that = this;
                if (that.userInfo.phone == null) {
                    uni.showModal({
                        title: '提示',
                        content: '您未登录，请先登录！',
                        confirmText: '去登录',
                        success(res) {
                            if (res.confirm) {
                                that.$wx.miniProgram.reLaunch({
                                    url: "/pages/authorize/authorize",
                                    success: function(){
                                        console.log('success')
                                    },
                                    fail: function(err){
                                    },
                                    complete:function(){
                                        console.log('complete');
                                    }
                                });
                            }
                        },
                    })
                } else {
                    this.getAuthorize()
                }
            },
            btOkclick() {
                if (this.data == '') {
                    this.$api.msg('请选择位置')
                    return
                }
                uni.showLoading()
                this.dataForm = {
					...this.dataForm,
                    lng: 0,
                    name: this.userInfo.nickName,
                    phone: this.userInfo.phone
				}
                this.$api.api('alarm', this.dataForm).then(res => {
                    uni.hideLoading()
                    if (res.code == 200) {
                        this.data = ''
						// this.phone = ''
                        this.$api.msg('报警成功，请耐心等待！')
                    } else {
                        this.$api.msg(res.message)
                    }
                }).catch(error => {
                    uni.hideLoading()
                    this.$api.msg(error.message)
                })
			},
            // 用户授权
            getAuthorize() {
                let than = this
                /*uni.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        console.log(res)
                        console.log('当前位置的经度：' + res.longitude);
                        console.log('当前位置的纬度：' + res.latitude);
                    }
                });*/
                uni.chooseLocation({
                    success: (res)=> {
                        console.log('位置名称：' + res.name);
                        console.log('详细地址：' + res.address);
                        console.log('纬度：' + res.latitude);
                        console.log('经度：' + res.longitude);
                        than.data = res.name + res.address
                        than.dataForm.alt = res.latitude;
                        than.dataForm.lat = res.longitude;
                    },
					fail: (error) => {
                        console.log(error)
                        // uni.getSetting({
                        //     success(res) {
                        //         console.log(res.authSetting)
                        //     }
                        // })
					}
                })
                /*wx.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                        let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                        let speed = res.speed; // 速度，以米/每秒计
                        let accuracy = res.accuracy; // 位置精度
                        that.dataForm = {
                            alt: longitude,
                            lat: latitude,
                            lng: speed,
                            name: that.userInfo.nickName,
                            phone: that.userInfo.phone
                        }
                        alert(that.dataForm.lng)
						uni.showLoading()
                        that.$api.api('alarm', that.dataForm).then(res => {
                            uni.hideLoading()
                            if (res.code == 200) {
                                this.$api.msg('报警成功，请耐心等待！')
                            } else {
                                this.$api.msg(res.message)
                            }
                        }).catch(error => {
                            uni.hideLoading()
                            this.$api.msg(error.message)
                        })
                    },
                    fail: (err) => {
                        console.log('getLocation err' + JSON.stringify(err))
                    }
                })*/
            },
            clickLeft() {
                uni.navigateBack({ delta: 1 });
            }
		}
	}
</script>

<style lang="scss">
	.form {
		margin: 60rpx 30rpx;
		font-size: 34rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 15rpx;
		.tui-flex {
			padding: 20rpx 0;
		}
		.name {
			width: 30%;
			color: #999;
		}
		.ipt {
			flex: 1;
			text-align: right;
			font-size: 34rpx;
			padding-right: 10rpx;
		}
	}
	.tui-head-back {
		.tui-back {
			display: inline;
			/*padding: 10rpx 6rpx 6rpx;*/
			/*border: 2rpx solid #999;*/
			/*border-radius: 50%;*/
		}
	}
	.tui-back-text {
		padding: 0 30rpx;
		font-size: 34rpx;
	}
	.tui-out{
		position: absolute;
		top: -30%;
		left: 0;
		right: 0;
		transform-origin: bottom center;
		padding: 20rpx;
		border-radius: 10rpx;
		background: rgba(0, 0, 0, 0.3);
		text-align: center;
		color: white;
		width: 75%;
		margin: 0 auto;
		max-width: 100vw;
		&:after {
			content: "";
			display: block;
			margin: 0 auto;
			widtH: 0;
			height: 0;
			border: 10rpx solid transparent;
			border-top: 10rpx solid rgba(0, 0, 0, 0.3);
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 100%);
		}
	}
.tui-help{
	margin: 50% auto;
	width: 500rpx;
	height: 500rpx;
	background: rgba(254,102,79, .2);
	border-radius: 50%;
	position: relative;
	color: #fff;
	.tui-help-2{
		background: rgba(254,102,79, .5);
		border-radius: 50%;
		width: 450rpx;
		height: 450rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		.tui-help-3 {
			background: rgba(254,102,79, 1);
			border-radius: 50%;
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			.tui-help-4 {
				width: 400rpx;
				height: 150rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				font-size: 60rpx;
				text-align: center;
			}
		}
	}
}
	.btOk{
		padding:0upx;
		clear:both;margin:60upx 30rpx 0;
		background-color:#4286f5;
		border-radius:10upx;
		color:#ffffff;font-size:33upx; line-height:93upx;
	}
</style>
